/* eslint-disable */
import React, { Component } from 'react';
import styles from './index.less';
import MyIcon from '../../common/MyIcon';

// 驾驶舱中的小盒子容器
class CockpitBox extends Component{

  static defaultProps = {
    style: {},            // 样式          
    className: "",        // 类名
    icon: '',             // 图标
    title: '',            // 标题
    rightRender: null,    // 右侧内容
  }

  defaultStyle = {
    
  }
  
  // 标题 包含左侧文字和右侧内容
  getTitle = () => {
    const { icon, title, rightRender, titleClick } = this.props;
    return (
      <div className={styles["title"]}>
        <div className={styles["left"]} onClick={titleClick}>
          <MyIcon type={icon} />
          <span>{ title }</span>
        </div>
        <div className={styles["right"]}>
          { rightRender }
        </div>
      </div>
    )
  }

  // 内容主体
  getContent = () => {
    return (
      <div className={styles["content"]}>
        { this.props.children }
      </div>
    )
  }

  render() {
    const { style, className } = this.props;
    return (
      <div 
        className={ styles["cockpit-box-wrapper"] + ' ' + className } 
        style={Object.assign({}, this.defaultStyle, style)}
      >
        { this.getTitle() }
        { this.getContent() }
      </div>
    )
  }

}

export default CockpitBox